<!--接口映射-->
<template>
  <div class="interface-map">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-yingshe" />
        </div>
        <span>接口映射</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" @click="clickButton('add')">新增接口映射</a-button>
      </div>
      <!-- 接口映射表格 -->
      <el-table
        :data="mapTableData"
        highlight-current-row
        border
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <slot v-for="(item,index) in mapColumns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="clickButton('edit', scope.row)">编辑</a>
            <a-divider type="vertical" />
            <a @click="clickButton('del', scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>

    <!-- 接口映射弹出框 -->
    <a-modal
      :title="modalTitle"
      :maskClosable="false"
      v-model="dialogFormVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'B_Order' ]" />
        </a-form-item>
        <a-form-item label="选择全宗">
          <a-cascader :options="options" placeholder="请选择全宗" />
        </a-form-item>
        <a-form-item label="选择门类">
          <a-select v-decorator="[ 'B_FMID', {rules: [{ required: true, message: '请选择门类' }]} ]" >
            <a-select-option :value="item.B_Value" v-for="(item,index) in dictionary.B_FMID" :key="index">{{ item.B_Value }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择表名">
          <a-select v-decorator="[ 'B_TableID', {rules: [{ required: true, message: '请选择表名' }]} ]" >
            <a-select-option :value="item.B_Value" v-for="(item,index) in dictionary.tableIdData" :key="index">{{ item.B_Value }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="档案用户">
          <a-select v-decorator="[ 'B_AMISID', {rules: [{ required: true, message: '请选择档案用户' }]} ]" >
            <a-select-option value="test">test</a-select-option>
            <a-select-option value="admin">admin</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="流程标识">
          <a-input v-decorator="[ 'B_DataID', {rules: [{ required: true, message: '请输入流程标识' }]} ]" />
        </a-form-item>
        <a-form-item label="对方用户标识">
          <a-input v-decorator="[ 'B_OAID', {rules: [{ required: true, message: '请输入对方用户标识' }]} ]" />
        </a-form-item>
        <a-form-item label="备注信息">
          <a-input v-decorator="[ 'B_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'InterfaceMap',
  components: {
  },
  data () {
    return {
      mapTableData: [
        {
          B_Order: '1',
          B_AMISID: 'admin',
          B_CName: '小兵',
          B_Dept: '研发部',
          B_Duty: '软件开发',
          B_TableID: 'Amis_Data_SSDAAJB',
          B_OAID: '123',
          B_DataID: '456'
        },
        {
          B_Order: '2',
          B_AMISID: 'test',
          B_CName: '小四',
          B_Dept: '研发部',
          B_Duty: '软件开发',
          B_TableID: 'Amis_Data_KYJNB',
          B_OAID: '321',
          B_DataID: '654'
        }
      ],
      mapColumns: [
        {
          title: '顺序号',
          field: 'B_Order'
        },
        {
          title: '档案系统用户账号',
          field: 'B_AMISID',
          width: 150
        },
        {
          title: '档案系统用户名称',
          field: 'B_CName',
          width: 150
        },
        {
          title: '档案系统所在部门',
          field: 'B_Dept',
          width: 150
        },
        {
          title: '档案系统部门职务',
          field: 'B_Duty',
          width: 150
        },
        {
          title: '归入的表名',
          field: 'B_TableID'
        },
        {
          title: 'OA用户标识',
          field: 'B_OAID'
        },
        {
          title: '工作流标识',
          field: 'B_DataID'
        }
      ],
      dialogFormVisible: false,
      modalTitle: '',
      form: this.$form.createForm(this),
      options: [
        {
          value: 'yanfa',
          label: '研发中心测试全宗'
        }
      ],
      dictionary: {
        B_FMID: [
          {
            B_Value: '诉讼档案'
          },
          {
            B_Value: '科研档案'
          },
          {
            B_Value: '文书档案'
          }
        ],
        tableIdData: [
          {
            B_Value: '诉讼档案案卷表'
          },
          {
            B_Value: '诉讼档案卷内表'
          },
          {
            B_Value: '诉讼档案人员表'
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '新增归档接口配置'
          this.dialogFormVisible = true
          break
        case 'edit':
          this.modalTitle = '编辑归档接口配置'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>
<style lang="less" scoped>
.interface-map {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
}
</style>
